import { menuRootStyleEnum, menuLayoutEnum } from '@/enums/root-css-enum';
// 添加单位
export const addUnit = (str: string) => str + 'px';

interface StyleSettings {
  appTitle: any;
  appTop: any;
  bookmark: any;
}
interface ThemeConfig {
  logoImage: string;
  menuLayout: 'top' | 'left' | 'hide';
  styleSettings: StyleSettings;
}
// 获取页面相关配置
export const getPageConfig = (config: string) => {
  if (typeof config === 'string') {
    const { logoImage, menuLayout, styleSettings }: ThemeConfig = JSON.parse(config);
    const {
      appTitle: { fontColor: titleColor, fontSize: titleSize },
      appTop,
      appTop: { fontColor: headerC, fontSize: headerFS, backgroundColor },
      bookmark: {
        fontColor: [bg1, tc1, atc1],
        fontSize: menuSize,
        bkColor: [bg2, tc2, atc2]
      }
    } = styleSettings;
    console.log(bg2);
    return {
      logoUrl: logoImage,
      menuStyle: {
        backgroundColor: bg1.color,
        textColor: tc1.color,
        activeTextColor: atc1.color,
        mode: menuLayoutEnum[menuLayout]
      },
      headerConfig: {
        baseStyle: {
          ...appTop,
          fontSize: addUnit(headerFS),
          color: headerC,
          background: backgroundColor
        },
        titleStyle: {
          fontSize: addUnit(titleSize),
          color: titleColor
        }
      },
      rootCss: {
        [menuRootStyleEnum.MENU_BACKGROUND_COLOR]: bg2.color,
        [menuRootStyleEnum.MENU_BACKGROUND_ACTIVE_COLOR]: tc2.color,
        [menuRootStyleEnum.MENU_BACKGROUND_HOVER_COLOR]: atc2.color,
        [menuRootStyleEnum.MENU_TEXT_COLOR]: bg1.color,
        [menuRootStyleEnum.MENU_TEXT_ACTIVE_COLOR]: tc1.color,
        [menuRootStyleEnum.MENU_TEXT_HOVER_COLOR]: atc1.color,
        [menuRootStyleEnum.MENU_TEXT_FONT_SIZE]: addUnit(menuSize)
      }
    };
  }
};
